<template>
    <div class="bg-white">
        <a-anchor class="bg-white text-2xl" direction="horizontal" :items="list" @click="onClick" />
    </div>
</template>

<script setup lang="ts">
import { useRequest } from "alova/client";

const emits = defineEmits<{ change: [link: { title: string; href: string }] }>();

const { data } = useRequest(Apis.Category.list({}));

const list = computed(() => {
    return data.value?.data?.map(item => ({
        key: item.id + "",
        title: item.name,
        href: "#" + item.id + ""
    }));
});

function onClick(_: any, link: { title: string; href: string }) {
    emits("change", link);
}
</script>
